import classes from './TextContent.module.css'
import {useEffect, useRef} from "react";
import {useSelector} from "react-redux";

function TextContent(props){

    const myRef = useRef()
    const {username,avatar,msg} = props
    const {me} = useSelector(state => state.user)
    useEffect(() => {
        myRef.current.innerHTML = avatar
    },[])
    return(
        <>
            <li className={me.username === username ? classes.li2 : classes.li1}>
                <div className={me.username === username ? classes.box2 : classes.box}>
                    <div className={classes.img} ref={myRef}>

                    </div>
                    <span>{username}</span>
                </div>
                <div>{msg}</div>
            </li>
        </>
    )
}
export default TextContent;